document.addEventListener('DOMContentLoaded', function() {
    // 初始化所有景点项
    const scenicItems = document.querySelectorAll('.scenic-item');
    scenicItems.forEach(item => {
        initScenicItem(item);
    });
});

function initScenicItem(item) {
    // 获取景点项中的元素
    const viewImagesBtn = item.querySelector('.view-images');
    const viewMapBtn = item.querySelector('.view-map');
    const galleryModal = item.querySelector('.gallery-modal');
    const mapModal = item.querySelector('.map-modal');
    const closeButtons = item.querySelectorAll('.close');
    const thumbnails = item.querySelectorAll('.gallery-thumbnails img');
    const mainImage = item.querySelector('.gallery-main img');
    const mapContainer = item.querySelector('#map-container');
    const mapLocation = item.querySelector('.map-location');

    // 初始化图片画廊
    if (viewImagesBtn && galleryModal) {
        viewImagesBtn.addEventListener('click', () => {
            galleryModal.style.display = 'block';
            // 设置第一张图片为主图
            if (thumbnails.length > 0 && mainImage) {
                mainImage.src = thumbnails[0].src;
            }
        });
    }

    // 初始化地图
    if (viewMapBtn && mapModal && mapContainer && mapLocation) {
        viewMapBtn.addEventListener('click', () => {
            mapModal.style.display = 'block';
            // 这里可以集成地图API，例如百度地图或高德地图
            // 示例：使用iframe嵌入地图
            const mapUrl = `https://map.baidu.com/search/${encodeURIComponent(mapLocation.textContent)}`;
            mapContainer.innerHTML = `<iframe src="${mapUrl}" width="100%" height="100%" frameborder="0"></iframe>`;
        });
    }

    // 关闭模态框
    closeButtons.forEach(button => {
        button.addEventListener('click', () => {
            const modal = button.closest('.modal');
            if (modal) {
                modal.style.display = 'none';
            }
        });
    });

    // 点击缩略图切换主图
    if (thumbnails.length > 0 && mainImage) {
        thumbnails.forEach(thumbnail => {
            thumbnail.addEventListener('click', () => {
                mainImage.src = thumbnail.src;
                // 添加活动状态样式
                thumbnails.forEach(t => t.classList.remove('active'));
                thumbnail.classList.add('active');
            });
        });
    }

    // 点击模态框外部关闭
    window.addEventListener('click', (event) => {
        if (event.target.classList.contains('modal')) {
            event.target.style.display = 'none';
        }
    });
}

// 添加图片预加载功能
function preloadImages(images) {
    if (!Array.isArray(images)) return;
    
    images.forEach(src => {
        if (typeof src === 'string') {
            const img = new Image();
            img.src = src;
        }
    });
}

// 添加图片加载错误处理
function handleImageError(img) {
    if (!img) return;
    
    img.onerror = function() {
        this.src = 'images/placeholder.jpg';
        this.alt = '图片加载失败';
    };
}

// 添加图片加载动画
function showImageLoading(img) {
    if (!img) return;
    
    img.style.opacity = '0';
    img.style.transition = 'opacity 0.3s';
    img.onload = function() {
        this.style.opacity = '1';
    };
} 